<template>
  <div>
    <div class="good-list-top">
      <el-form ref="findList" :inline="true" :model="findList" label-width="100px" class="findList">
        <el-form-item label="商品名称：" prop="goodsName" label-width="80px">
          <el-input v-model="goodsName" placeholder="请输入" @change="flag = false" />
        </el-form-item>
        <el-form-item label="分类：" prop="firstSort" label-width="52px">
          <el-select v-model="findList.firstSort" placeholder="请选择一级分类" @change="typeCheck_one()">
            <el-option
              v-for="item in typeFindList.one"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="secondSort">
          <el-select
            v-show="findList.firstSort"
            v-model="findList.secondSort"
            placeholder="请选择二级分类"
            @change="typeCheck_two()"
          >
            <el-option
              v-for="item in typeFindList.two"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="thridSort">
          <el-select
            v-show="findList.secondSort"
            v-model="findList.thridSort"
            placeholder="请选择三级分类"
            @change="typeCheck_three()"
          >
            <el-option
              v-for="item in typeFindList.three"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit('findList')">查询</el-button>
          <el-button style="background:#F6F8F9" @click="resetForm('findList','hideForm')">重置</el-button>
        </el-form-item>
        <el-form-item>
          <div
            style="text-align:right;width:135px;color:#1890FF;cursor: pointer;"
            @click="screenShow()"
          >
            <div v-show="screenFlag">
              <span>收起更多筛选条件</span>
              <i class="el-icon-arrow-up" />
            </div>
            <div v-show="!screenFlag">
              <span>查看更多筛选条件</span>
              <i class="el-icon-arrow-down" />
            </div>
          </div>
        </el-form-item>
      </el-form>
      <transition name="otherScreen">
        <el-form
          v-show="screenFlag"
          ref="hideForm"
          :inline="true"
          :model="hideForm"
          label-width="100px"
          class="otherScreen"
        >
          <el-form-item label="价格区间：" prop="priceRangeLeft" label-width="80px">
            <el-input
              v-model="hideForm.priceRangeLeft"
              placeholder="输入最低金额"
              @blur="inputPriceJudge()"
              @change="flag = false"
            />
          </el-form-item>
          <span style="margin-left:8px">～</span>
          <el-form-item prop="priceRangeRight" style="margin-left:8px">
            <el-input
              v-model="hideForm.priceRangeRight"
              placeholder="请输入最高金额"
              @blur="inputPriceJudge()"
              @change="flag = false"
            />&ensp;元
          </el-form-item>
          <!-- <el-form-item
            label="上架时间："
            prop="groundingTime"
            label-width="70px"
            style="margin-left:30px;"
            @change="flag = false"
          >
            <el-date-picker v-model="hideForm.groundingTime" type="date" placeholder="选择日期" />
          </el-form-item>-->
        </el-form>
      </transition>
    </div>
    <div v-loading="disabled" class="goods-list-content">
      <div class="gslt-topnav">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          text-color="#3C4353"
          active-text-color="#1182FB"
          @select="handleSelect"
        >
          <el-menu-item index="00200001" style="font-size:14px;">出售中的商品</el-menu-item>
          <el-menu-item index="00200003" style="font-size:14px;">仓库中的商品</el-menu-item>
          <el-menu-item index="00200002" style="font-size:14px;">违规商品</el-menu-item>
          <router-link class="add-goods-btn" to="/goods/add">
            <i class="el-icon-plus" />
            <span>新增商品</span>
          </router-link>
        </el-menu>
      </div>
      <div class="label">
        <div class="flexbox justify handle">
          <div class="select-all flexbox left middle">
            <el-checkbox v-model="checked" @change="selectAll(tableData)">全部</el-checkbox>
            <el-button @click="allDeleteData()">批量删除</el-button>
            <el-button v-if="!(activeIndex==='00200002' || activeIndex==='00200003')" @click="allCancelData('00200003')">批量下架</el-button>
            <el-button v-if="activeIndex==='00200003'" @click="allCancelData('00200001')">批量上架</el-button>
            <!-- <el-dropdown>
              <el-button type="primary">
                更多操作
                <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>XXXXXXXXXX</el-dropdown-item>
                <el-dropdown-item>XXXXXXXXXX</el-dropdown-item>
                <el-dropdown-item>XXXXXXXXXX</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>-->
            <span>
              已选择
              <span
                style="font-weight:500;color:rgba(17,130,251,1);"
              >&ensp;{{ multipleSelection.length }}&ensp;</span>项
            </span>&emsp;
            <span
              style="color:#1890FF;cursor:pointer;"
              @click="selectAllFalse(multipleSelection)"
            >清空</span>
          </div>
        </div>
        <!-- 分类表格数据 -->
        <el-row>
          <!-- 表头 -->
          <el-table class="tabel-top">
            <el-table-column type="selection" width="55" />
            <el-table-column label="商品图片" width="160" />
            <el-table-column label="商品名称" width="312" />
            <el-table-column label="商品分类" />
            <el-table-column label="价格" />
            <el-table-column label="库存" width="100" />
            <el-table-column label="销量" />
            <el-table-column label="上架时间" />
            <el-table-column label="操作" width="210" align="left">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="mini" @click="handleBan(scope.row)">禁用</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 表单 -->
          <el-table
            v-show="tableData.length>0"
            ref="multipleTable"
            size="mini"
            :header-cell-class-name="cellClass"
            :data="tableData"
            :show-header="false"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="商品图片" width="160" prop="imageUrl">
              <template slot-scope="scope">
                <el-image :src="qnPath(scope.row.image)" alt>
                  <div slot="error" class="image-slot">
                    <img :src="require('../../assets/images/background-upload-false.png')" alt="">
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" width="312" prop="name">
              <template slot-scope="scope">
                <div style="max-width:257px;font-size:14px;">
                  <a @click="toDetail(scope.row.id)">
                    <div style="color:#3C4353;font-weight:600;">{{ scope.row.name }}</div>
                  </a>
                  <div style="color:#838A9D">ID:{{ scope.row.id }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品分类" prop="type">
              <template slot-scope="scope">
                <div>{{ scope.row.typeValue }}</div>
              </template>
            </el-table-column>
            <el-table-column label="价格" prop="price">
              <template slot-scope="scope">
                <div>{{ scope.row.unitPrice|fixedPrice }}</div>
              </template>
            </el-table-column>
            <el-table-column label="库存" width="100" prop="stock">
              <template slot-scope="scope">
                <div v-show="scope.row.amount>=10?true:false">
                  <span>{{ scope.row.amount }}</span>
                </div>
                <div v-show="scope.row.amount<10?true:false">
                  <span style="color: #e9433a;opacity: 0.8;">{{ scope.row.amount }}</span>
                  <span class="stock-less-icon">
                    <span>库存不足</span>
                    <div />
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="销量" prop="saled">
              <template slot-scope="scope">
                <div>{{ scope.row.sales }}</div>
              </template>
            </el-table-column>
            <el-table-column label="上架时间" prop="shelfTime">
              <template slot-scope="scope">
                <div style="min-width:130px;">{{ scope.row.createDate | filterDate }}</div>
                <div
                  v-show="scope.row.mainProduct==='00300002'?true:false"
                  class="main-product-icon el-icon-star-off"
                >主打产品</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="210" align="left">
              <template slot-scope="scope">
                <div class="edit-list">
                  <el-button
                    type="text"
                    size="mini"
                    class="font-14-1182FB"
                    @click="handleEdit(scope.row.id)"
                  >编辑</el-button>
                  <el-button
                    v-show="scope.row.mdseStatus==='00200003' || scope.row.mdseStatus==='00200002'?false:true"
                    type="text"
                    size="mini"
                    class="font-14-1182FB"
                    @click="handleBan(scope.row.id, '00200003')"
                  >立即下架</el-button>
                  <el-button
                    v-show="scope.row.mdseStatus==='00200003'?true:false"
                    type="text"
                    size="mini"
                    class="font-14-1182FB"
                    @click="handleBan(scope.row.id, '00200001')"
                  >立即上架</el-button>
                  <el-dropdown trigger="click" @command="deleteOneData">
                    <span class="el-dropdown-link">
                      更多
                      <i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown" class="list-everyone-more">
                      <el-dropdown-item :command="'mainProduct'+scope.row.id+','+scope.row.mainProduct">{{ scope.row.mainProduct === "00300001"?"设为主打产品":"取消主打产品" }}</el-dropdown-item>
                      <el-dropdown-item divided :command="'delete'+scope.row.id">删除该产品</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div v-show="tableData.length<=0" class="none">
            <div>暂无商品</div>
          </div>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              v-show="tableData.length>0"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, sizes, jumper"
              :total="noticeCount"
              :hide-on-single-page="true"
              :page-sizes="[6,10, 20, 50, 100]"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getMdseList, getMdseType, update } from '@/api/goods';
import { mapGetters } from 'vuex';
import { getDate, getTime } from '@/utils/date';
export default {
  filters: {
    filterDate: function(value) {
      const date = new Date(value);
      return getDate(date) + ' ' + getTime(date, true);
    }
  },
  data() {
    return {
      findList: {
        firstSort: '',
        secondSort: '',
        thridSort: ''
      },
      hideForm: {
        priceRangeLeft: '',
        priceRangeRight: '',
        groundingTime: ''
      },
      typeFindList: {
        one: [{ name: '1', id: '2' }],
        two: [{ name: '1', id: '2' }],
        three: [{ name: '1', id: '2' }]
      },
      goodsName: '',
      typeChangeSure: '',
      screenFlag: false,
      activeIndex: '00200001',
      multipleSelection: [],
      tableData: [],
      // 是否是主打产品
      mainProductFlag: false,
      // 价格区间字符串
      priceS: '',
      status: '00200001',
      checked: false,
      // 新增标签
      formLabelAlign: [],
      addlabel: false,
      // 分页
      currentPage: 1,
      pageSize: 0,
      noticeCount: 0,
      // 每页多少条
      muchData: 6,
      // 当前页码
      momentPage: 1,
      flag: false,
      disabled: false
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  watch: {
    // 监听时间变化
    // "hideForm.groundingTime": function(newValue, oldValue) {
    //   this.hideForm.groundingTime = new Date(newValue).getTime();
    //   this.hideForm.groundingTime === 0
    //     ? (this.hideForm.groundingTime = "")
    //     : (this.hideForm.groundingTime = new Date(newValue).getTime());
    // }
    $route(to, from) {
      if (to.query.search) {
        this.getList(1, this.muchData, '', '', '', '', to.query.search);
      }
    }
  },
  created() {
    // {"shopId"：""，"pageNo"："","pageSize"：""}
    getMdseType({ level: '1' }).then(res => {
      this.typeFindList.one = res.data;
    });
    const to = this.$router.currentRoute.query;
    if (to.search) {
      this.getList(1, this.muchData, '', '', '', '', to.search);
    } else {
      this.getList();
    }
  },
  methods: {
    // 点击查询按钮
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          for (const item in this.findList) {
            if (this.findList[item]) {
              this.typeChangeSure = this.findList[item];
            }
          }
          this.flag = true;
          // 价格区间判断
          this.priceChangeJudge();
          this.getList(
            1,
            this.muchData,
            this.typeChangeSure,
            this.goodsName,
            this.priceS,
            this.hideForm.groundingTime
          );
        } else {
          return false;
        }
      });
    },
    // 重置表单（表头）
    resetForm(formName, formSecond) {
      this.$refs[formName].resetFields();
      this.$refs[formSecond].resetFields();
      this.goodsName = '';
      this.flag = false;
    },
    // 隐藏显示更多筛选
    screenShow() {
      this.screenFlag = !this.screenFlag;
    },
    // 表单的位置
    handleSelect(key, keyPath) {
      this.status = key;
      this.activeIndex = key;
      this.getList(
        1,
        this.muchData,
        this.typeChangeSure,
        this.goodsName,
        this.priceS,
        this.status
      );
    },
    // 判断输入价格
    inputPriceJudge() {
      if (!this.hideForm.priceRangeRight) {
        return;
      }
      if (
        parseFloat(this.hideForm.priceRangeLeft) >
        parseFloat(this.hideForm.priceRangeRight)
      ) {
        let flag = 0;
        flag = this.hideForm.priceRangeLeft;
        this.hideForm.priceRangeLeft = this.hideForm.priceRangeRight;
        this.hideForm.priceRangeRight = flag;
      }
    },
    // 获得已经全选中的数组
    handleSelectionChange(val) {
      if (val.length === this.tableData.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.multipleSelection = val;
    },
    cellClass(row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck';
      }
    },
    // 设置是否全选
    selectAll(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleAllSelection(row);
        });
      }
    },
    // 批量删除按钮
    allDeleteData() {
      this.$confirm('是否确定批量删除选中的商品', '批量删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 批量删除和批量下架：{"id"："商品id"，"status"："要把商品改成什么状态"，"flag"："1"}
        // 删除：flag ：1 ;删除不传status ；下架不传flag
        if (this.multipleSelection.length >= 1) {
          let data = [];
          for (const item of this.multipleSelection) {
            data.push(item.id);
          }
          data = data.join('/');
          const param = {
            id: data,
            flag: 1
          };
          update(param).then(res => {
            if (res.code === '0000') {
              this.$message.success('商品批量删除' + res.message);
              this.getList(
                this.momentPage,
                this.muchData,
                this.typeChangeSure,
                this.goodsName,
                this.priceS,
                this.status
              );
            } else {
              this.$message.error('商品批量删除失败');
            }
          });
        } else {
          this.$message.error('请选择删除商品');
        }
      });
    },
    // 批量下架按钮
    allCancelData(status) {
      this.$confirm(status === '00200003' ? '是否确定批量下架选中的商品？商品下架后请到“仓库中的商品”查看并管理该商品。' : '是否确定批量上架选中的商品？商品上架后请到“出售中的商品”查看并管理该商品。', status === '00200003' ? '批量下架' : '批量上架', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 批量删除和批量下架：{"id"："商品id"，"status"："要把商品改成什么状态"，"flag"："1"}
        // 删除：flag ：1    下架flag：0
        if (this.multipleSelection.length >= 1) {
          let data = [];
          for (const item of this.multipleSelection) {
            data.push(item.id);
          }
          data = data.join('/');
          const param = {
            id: data,
            status
          };
          update(param).then(res => {
            if (res.code === '0000') {
              status === '00200003' ? this.$message.success('商品批量下架' + res.message) : this.$message.success('商品批量上架' + res.message);
              this.getList(
                this.momentPage,
                this.muchData,
                this.typeChangeSure,
                this.goodsName,
                this.priceS,
                this.status
              );
            } else {
              status === '00200003' ? this.$message.error('商品下架失败') : this.$message.error('商品上架失败');
            }
          });
        } else {
          status === '00200003' ? this.$message.error('请选择下架商品！') : this.$message.error('请选择上架商品！');
        }
      });
    },
    // 单个删除和设为主打产品
    deleteOneData(command) {
      if (command.indexOf('delete') >= 0) {
        // 删除
        this.$confirm('确定要删除此商品吗?', '删除商品', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          command = command.slice('delete'.length);
          const param = {
            id: command,
            flag: 1
          };
          update(param).then(res => {
            if (res.code === '0000') {
              this.$message.success('商品删除' + res.message);
              this.getList(
                this.momentPage,
                this.muchData,
                this.typeChangeSure,
                this.goodsName,
                this.priceS,
                this.status
              );
            } else {
              this.$message.error('商品删除失败');
            }
          });
        }).catch(() => {
        });
      } else if (command.indexOf('mainProduct') >= 0) {
        // 设为主打产品
        const com = command.slice('mainProduct'.length).split(',')[0];
        const mainProduct = command.slice('mainProduct'.length).split(',')[1] === '00300002' ? '00300001' : '00300002';
        const param = {
          id: com,
          mainProduct
        };
        update(param).then(res => {
          if (res.code === '0000') {
            this.$message.success('商品设置主打产品' + res.message);
            this.getList(
              this.momentPage,
              this.muchData,
              this.typeChangeSure,
              this.goodsName,
              this.priceS,
              this.status
            );
          } else {
            this.$message.error('商品设置主打产品失败');
          }
        });
      }
    },
    // 单个下架
    handleBan(value, status) {
      this.$confirm(status === '00200003' ? '是否确定下架？商品下架后请到“仓库中的商品”查看并管理该商品。' : '是否确定上架？商品上架后请到“出售中的商品”查看并管理该商品。', status === '00200003' ? '立即下架' : '立即上架', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          id: value,
          status
        };
        update(param).then(res => {
          if (res.code === '0000') {
            status === '00200003' ? this.$message.success('商品下架' + res.message) : this.$message.success('商品上架' + res.message);
            this.getList(
              this.momentPage,
              this.muchData,
              this.typeChangeSure,
              this.goodsName,
              this.priceS,
              this.status
            );
          } else {
            status === '00200003' ? this.$message.error('商品下架失败') : this.$message.error('商品上架失败');
          }
        });
      }).catch(() => {
      });
    },
    // 清空
    selectAllFalse(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, false);
        });
      }
    },
    // 获取列表
    getList(
      pageNo = 1,
      pageSize = 6,
      mdsePropertyId = '',
      mdseName = '',
      price = '',
      status = '00200001',
      id = ''
    ) {
      // mdsePropertyId：分类ID
      // mdseName:商品名字
      // {"shopId"："","mdsePropertyId":"分类id","mdseName":"商品名字"，"price"："价格区间"，"time"："创建时间"}
      this.disabled = true;
      const params = {
        shopId: this.shopInfo.id,
        pageNo,
        pageSize,
        mdsePropertyId,
        mdseName,
        price,
        status: this.status,
        id
      };
      getMdseList(params)
        .then(res => {
          this.tableData = res.data.mdse;
          this.noticeCount = res.data.size;
          this.pageSize = pageSize;
          this.currentPage = pageNo;
          this.disabled = false;
        })
        .catch(res => {
          this.disabled = false;
        });
    },
    // 每页多少条
    handleSizeChange(val) {
      this.muchData = val;
      // 价格区间判断
      this.priceChangeJudge();
      this.flag
        ? this.getList(
          this.momentPage,
          this.muchData,
          this.typeChangeSure,
          this.goodsName,
          this.priceS,
          this.status
        )
        : this.getList(this.momentPage, val);
    },
    // 当前页码
    handleCurrentChange(val) {
      this.momentPage = val;
      // 价格区间判断
      this.priceChangeJudge();
      this.flag
        ? this.getList(
          val,
          this.muchData,
          this.typeChangeSure,
          this.goodsName,
          this.priceS,
          this.status
        )
        : this.getList(val, this.muchData);
    },
    // 分类获取
    typeCheck_one() {
      this.flag = false;
      getMdseType({ parentId: this.findList.firstSort }).then(res => {
        res.data.shift();
        this.typeFindList.two = res.data;
        this.findList.secondSort = '';
        this.findList.thridSort = '';
      });
    },
    typeCheck_two() {
      this.flag = false;
      getMdseType({ parentId: this.findList.secondSort }).then(res => {
        res.data.shift();
        this.typeFindList.three = res.data;
        this.findList.thridSort = '';
      });
    },
    typeCheck_three() {
      this.flag = false;
    },
    // 编辑
    handleEdit(value) {
      sessionStorage.setItem('handleEdit', value);
      this.$router.push('/goods/add');
    },
    // 价格判断
    priceChangeJudge() {
      if (this.hideForm.priceRangeRight && !this.hideForm.priceRangeLeft) {
        this.priceS = `0～${this.hideForm.priceRangeRight * 100}`;
      }
      if (!this.hideForm.priceRangeRight && this.hideForm.priceRangeLeft) {
        this.priceS = `${this.hideForm.priceRangeLeft * 100}～999999999`;
      }
      if (this.hideForm.priceRangeLeft && this.hideForm.priceRangeRight) {
        this.priceS = `${this.hideForm.priceRangeLeft * 100}～${this.hideForm
          .priceRangeRight * 100}`;
      } else {
        this.priceS = '';
      }
    },
    toDetail(value) {
      //  to="/goods/detail"
      sessionStorage.setItem('goodsDetail', value);
      this.$router.push('/goods/detail');
    }
  }
};
</script>

<style lang="scss" scoped>
.good-list-top {
  border-radius: 3px;
  overflow: hidden;
  .el-form {
    min-width: 1660px;
    max-width: 100%;
    height: 70px;
    background: rgba(255, 255, 255, 1);
    border-radius: 3px;
    padding: 10px;
    display: flex;
    align-items: center;
    .el-form-item {
      font-size: 14px;
      margin: 0;
      margin-left: 15px;

      .el-icon-arrow-down {
        color: #1890ff;
        width: 11px;
        height: 8px;
      }
      .el-input {
        width: 220px;
        height: 36px !important;
        border-radius: 4px;
        /deep/.el-input__inner {
          height: 36px;
        }
      }
      .el-select {
        /deep/.el-input__inner {
          height: 36px;
          width: 170px;
        }
      }
      .el-button {
        width: 80px;
        height: 34px;
        background: rgba(17, 130, 251, 1);
        border-radius: 3px;
        margin-top: 2px;
        padding: 0;
      }
      /deep/.el-form-item__label {
        padding: 0;
        color: #3c4353;
      }
    }
  }
  .otherScreen {
    height: 70px;
    width: 100%;
    background: #fff;
    padding-top: 0;
    transition: height 0.3s;
    .el-form-item {
      .el-date-editor {
        width: 224px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        /deep/.el-input__inner {
          width: 224px !important;
          height: 36px !important;
        }
      }
      .el-input {
        width: 149px;
        /deep/.el-input__inner {
          width: 149px;
        }
      }
    }
  }
  .findList {
    display: flex;
    flex-flow: row nowrap;
  }
  //动画
  .otherScreen-enter-active,
  .otherScreen-leave-active {
    transition: opacity 0.5s;
  }
  .otherScreen-enter,
  .otherScreen-leave-to {
    opacity: 0;
  }
}
.none {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 54vh;
  align-items: center;
  background:#fff;
  & > div {
    display: flex;
    align-items: center;
    font-size: 16px;
    color:rgba(0,0,0,0.25);
    &:before {
      content:'';
      display:inline-block;
      height: 24px;
      width: 50px;
      background: url("../../assets/images/icon-cry.png") no-repeat center;
      background-size: 24px 24px;
    }
  }
}
.wait-loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(251, 255, 253, 0.2);
}
//清单
.goods-list-content {
  margin-top: 20px;

  //表大头
  .gslt-topnav {
    width: 100%;
    /deep/th,
    tr {
      background-color: red !important;
    }
    .el-menu {
      .el-menu-item {
        height: 70px;
        margin: 0 13px;
        font-size: 16px;
        font-weight: 500;
        line-height: 70px;
        padding: 7px;
        margin-right: 40px;
        margin-left: 34px;
      }
      .add-goods-btn {
        width: 112px;
        height: 36px;
        background: rgba(17, 130, 251, 1);
        border-radius: 3px;
        color: #fff;
        line-height: 36px;
        padding: 0;
        float: right;
        margin: 17px 20px 17px 0;
        padding-left: 17px;
        span {
          display: inline-block;
          width: 70px;
          height: 22px;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          padding-left: 6px;
        }
        /deep/.el-icon-plus:before {
          width: 10px;
          height: 11px;
        }
      }
    }
  }
  //表小头颜色
  /deep/.el-table__header-wrapper th,
  /deep/.el-table__header-wrapper tr {
    background-color: #f6f8f9;
  }
  //表单
  .label {
    background-color: #fff;
    overflow: hidden;
    min-height: calc(100vh - 356px);
    .handle {
      //全选
      color: #3c4353;
      font-size: 14px;
      .select-all {
        padding: 24px 0 26px 37px;
        &/deep/.el-button {
          width: 100px;
          height: 32px;
          background: rgba(246, 248, 249, 1);
          border: 1px solid rgba(228, 233, 239, 1);
          margin: 0 15px 0 0;
          padding: 0;
          color: #3c4353;
          &:nth-child(2) {
            margin-left: 37px;
          }
        }
      }
    }
    .el-row {
      .el-table {
        margin-left: 20px;
        font-size: 14px;
        /deep/.cell {
          padding: 15px 0;
          height: 140px;
          .el-checkbox {
            margin-left: 20px;
            line-height: 126px;
          }
          img {
            width: 110px;
            height: 110px;
          }
          .el-dropdown {
            width: 55px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(17, 130, 251, 1);
            line-height: 22px;
            margin-left: 10px;
            .el-dropdown-link {
              cursor: pointer;
            }
          }
          .font-14-1182FB {
            color: #1182fb;
            font-size: 14px;
            padding: 0 10px 0 0;
            border-right: 1px solid #e9e9e9;
          }
          .main-product-icon {
            line-height: 20px;
          }
        }
      }
      .tabel-top {
        /deep/tr,
        /deep/thead {
          background-color: red;
        }
        /deep/.el-table__body-wrapper {
          display: none;
        }
        /deep/.el-checkbox__inner {
          display: none !important;
        }
        /deep/.cell {
          height: 22px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(60, 67, 83, 1);
          line-height: 22px;
          padding: 0;
        }
      }
    }

    // 取消表头全选框
    .el-table /deep/.disabledCheck .cell .el-checkbox__inner {
      display: none !important;
    }

    .el-table /deep/.disabledCheck .cell::before {
      content: "";
      text-align: center;
      line-height: 37px;
    }
  }
}
.list-everyone-more {
  .el-dropdown-menu__item {
    font-size: 14px;
    font-weight: 400;
    color: rgba(17, 130, 251, 1);
    line-height: 22px;
  }
}
//分页
.pagination {
  margin-top: 18px;
  text-align: center;
}
.main-product-icon {
  width: 77px;
  height: 20px;
  background: rgba(230, 247, 255, 1);
  border-radius: 11px;
  text-align: center;
  color: #1182fb;
}
.stock-less-icon {
  display: inline-block;
  width: 66px;
  height: 20px;
  text-align: center;
  position: relative;
  top: 5px;
  div {
    background: rgba(247, 87, 87, 1);
    border-radius: 10px;
    opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  span {
    display: inline-block;
    width: 100%;
    line-height: 20px;
    color: #e9433a;
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 0.8;
  }
}
</style>
